#{extends 'main.html' /}
#{set title:'CoolSoft - Projects' /}
    <script type="text/javascript">
        function showList(){
			var change = document.getElementById("selectCheckBox").checked;
			var d = document.getElementById("selectionDiv");
			var x = document.getElementById("selectionSubmit");
			var s = document.getElementById("roleSelect");
			if(change==false)
			{
				d.setAttribute("style", "");
				d.removeAttribute("disabled");
				s.removeAttribute("disabled");
			}
			else{
				d.setAttribute("style", "opacity:0.5");	
				d.setAttribute("disabled", "true");
				s.setAttribute("disabled", "true");
			}
		}
			</script>
<div>
<h3>
<form>
	<input id="selectCheckBox" type="checkbox"   onclick ="showList()">
</form>
&nbsp;&nbsp; Would you like to request a specific role?
</h3>
</div>


#{form @Projects.sendProjectJoinRequest()}
	<h4 >Select Roles:</h4>
<div  id="selectionDiv" style="opacity:0.5" disabled="true" name="secondDiv">
<select id="roleSelect"  name="selection" disabled="true" >
  #{list items:roles, as:'role'}
	<option name="${role.id}" value="${role.id}">${role.title}</option>
  #{/list} 
   </select>
 </div>
<br></br>
<input type="hidden" name="projectId" value="${project.getEntityId()}"></input>
<input id="selectionSubmit"  type="submit" value="Join">
#{/form}
	
